<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="shortcut icon" href="../img/head.ico" type="image/x-icon">
    <meta charset="utf-8">
    <style>
        * {
            font: "Segoe WPC", "Segoe UI", "HelveticaNeue-Light", sans-serif, "Droid Sans Fallback";
        }

        .cb {
            font-size: 16px;
        }

        .bt {
            font-size: 16px;
        }

        .SH {
            background-color: #FFCC99;
            text-align: left;
            font-size: 14pt;
            color: #4A0095;
            cursor: pointer;
            text-decoration: none;
            font-weight: normal;
            margin-top: 6px;
            margin-bottom: 2px;
        }

        .SH:hover {
            text-decoration: underline;
            font-weight: bold;
        }

        #cy {
            width: 580px;
            height: 590px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border: dashed #00A837;
            margin-bottom: 5px;
        }

        #ca {
            width: 580px;
            height: 590px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border: dashed #00A837;
            margin-bottom: 5px;
        }

        #inputs {
            border: 1px solid;
            text-align: center;
            margin: auto auto;
        }

        #inputs tr td {
            border: 1px solid;
        }

        .input_style {
            width: 75px;
            text-align: center;
        }

        .title {
            width: 150px;
            text-align: center;
            margin: auto auto;
            font-size: 22px;
            font-weight: bold;
        }

        .current {
            font-weight: bold;
            color: red;
            /*font-size: 18px;*/
            text-decoration: underline;
        }

        .normal {}
    </style>
    <title>Directed Graphs</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cytoscape-context-menus@3/cytoscape-context-menus.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cytoscape-panzoom@2/cytoscape.js-panzoom.min.css">

    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
    <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
    <script src="../js/bootstrap.min.js"></script>

    <script src="js/gui-layout.js"></script>

    <!-- Cola layout depends on weaver -->
    <script src="https://cdn.jsdelivr.net/npm/weaverjs@1/dist/weaver.min.js"></script>
    <!-- Edgehandles depend on Lodash -->
    <script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js"></script>
    <!-- Cola layout depends on WebCola -->
    <script src="https://cdn.jsdelivr.net/npm/webcola@3/WebCola/cola.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape@3/dist/cytoscape.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-cxtmenu@3/cytoscape-cxtmenu.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-cose-bilkent@4/cytoscape-cose-bilkent.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-panzoom@2/cytoscape-panzoom.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-cola@2/cytoscape-cola.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-spread@2/cytoscape-spread.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-snap-to-grid@2/cytoscape-snap-to-grid.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-context-menus@3/cytoscape-context-menus.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/cytoscape-edgehandles@3/cytoscape-edgehandles.min.js"></script>

    <!-- Additional dependencies -->
    <script src="https://cdn.jsdelivr.net/npm/mathjs@4/dist/math.min.js"></script>
</head>

<body style="width: 1440px; margin: auto auto; text-align: center">
    <table class="form-inline">
        <tr>
            <td style="width: 250px; text-align: center; vertical-align: top">
                <div class="SH" onclick="ShowHide('layout_div', this)" style="margin-top: 2px;">◢ Layout</div>
                <div id="layout_div">
                    <p style="margin-top: 2px;margin-bottom: 3px; vertical-align: middle">
                        <label for="layout"></label>
                        <select style="font-size: 17px; margin: 2px; width: 160px;" id="layout" onchange="changeLayout(this.selectedIndex)">
                            <option value="breadthfirst">Breadth First</option>
                            <option value="circle">Circle</option>
                            <option value="cose-bilkent">CoSE-Bilkent</option>
                            <option value="cola">Cola</option>
                            <option value="grid">Grid</option>
                            <option value="random">Random</option>
                            <option value="snapToGrid">Snap to grid</option>
                            <option value="spread" selected>Spread</option>
                        </select>
                        <button class="btn btn-info" onclick="reLayout()">
                            <i class="fa fa-refresh fa-1x" aria-hidden="true"></i>
                        </button>
                    </p>
                    <label for="autorefresh" class="cb checkbox">
                        <input id="autorefresh" type="checkbox" checked />Auto-refresh
                    </label>&nbsp;
                    <label for="hide_result" class="cb checkbox">
                        <input id="hide_result" type="checkbox" checked onclick="hideResult(this);" />Hide result
                    </label><br />
                </div>
                <div class="SH" onclick="ShowHide('inputs_div', this)">◢ Inputs</div>
                <div id="inputs_div">
                    <table id="inputs">
                        <tr>
                            <td>
                                <label for="nid"></label>
                                <input class="input_style" type="text" id="nid" value="" placeholder="number" /><br />
                                <button class="btn btn-default" onclick="addNode(true, null)">Add nodes</button>
                            </td>
                            <td>
                                <label for="weight"></label>
                                <input class="input_style" type="text" id="weight" name="weight" value="" placeholder="weight" /><br />
                                <label for="src_tg"></label>
                                <input class="input_style" type="text" id="src_tg" name="src_tg" value="" placeholder="src-tg-num" /><br />
                                <button class="btn btn-default" onclick="addEdge()">Add edges</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="nodeid"></label>
                                <input class="input_style" type="text" id="nodeid" name="nodeid" value="" placeholder="Node ID" /><br />
                                <button class="btn btn-default" onclick="removeNode()">Remove nodes</button>
                            </td>
                            <td>
                                <label for="r_src_tg"></label>
                                <input class="input_style" type="text" id="r_src_tg" value="" placeholder="src-tg-num" /><br />
                                <button class="btn btn-default" onclick="removeEdge()">Remove edges</button>
                            </td>
                        </tr>
                    </table>
                    <button class="btn" onclick="removeSelected()">Remove selected</button>
                    <button class="btn btn-default" onclick="addEdgeBetweenSelected()">Add edges between selected</button>
                </div>
                <div class="SH" onclick="ShowHide('action_div', this)">◢ Actions</div>
                <div id="action_div">
                    <button class="btn btn-default" onclick="generateGraph()">Generate Random Graph</button>
                    <br />

                    <label for="simple" class="cb checkbox">
                        <input type="checkbox" id="simple" checked onchange="hideWeight(this)" />Simple
                    </label>&nbsp;
                    <label id="wlabel" for="weighted" class="cb checkbox">
                        <input type="checkbox" id="weighted" />Weighted
                    </label><br />
                    <button class="btn btn-default" onclick="Kn()">K<sub>n</sub></button>
                    <button class="btn btn-default" disabled onclick="Kn_n()">K<sub>n,n</sub></button>
                    <br />
                </div>
                <div class="SH" onclick="ShowHide('matrix_div', this)">◢ Create from Matrix</div>
                <div id="matrix_div">
                    <label for="matrix_input"></label>
                    <textarea id="matrix_input" rows="5" cols="28" wrap="off" style="overflow-x: auto;overflow-y: auto"></textarea><br />
                    <button class="btn btn-default" onclick="readAM()">From AM</button>
                    <button class="btn btn-default" onclick="readWM()">From WM</button>
                    <!--<button onclick="readGraphML()">From XML</button>-->
                    <br />
                </div>
                <div class="SH" onclick="ShowHide('algorithms_div', this)">◢ Algorithms</div>
                <div id="algorithms_div">
                    <label for="algorithms"></label>
                    <select id="algorithms" style="font-size: 16px; margin-bottom: 5px;">
                        <option value="breadthFirstSearch()">Breadth First Search</option>
                        <option value="depthFirstSearch()">Depth First Search</option>
                        <option value="performDijkstra()">Dijkstra</option>
                        <option value="pageRank()">Page Rank</option>
                        <option value="myPageRank()">Detailed Page Rank</option>
                        <option value="heldKarp(true)">Held Karp</option>
                    </select>
                    <br />
                    <label for="animation" class="cb checkbox">
                        <input id="animation" type="checkbox" value="Animation" style="font-size: 16px;" checked
                            onclick="hideDuration(this)" />Animation
                    </label>&nbsp;
                    <label id="label-duration" for="duration">
                        <input type="number" value="700" step="10" min="0" max="100000" style="width: 50px;" id="duration" />&nbsp;ms
                    </label><br />
                    <button class="btn btn-primary" id="perform" onclick="callToAlgorithms()" style="font-size: 15px; font-weight: bold;">Perform
                    </button>
                    <button class="btn btn-primary" style="font-size: 15px; font-weight: bold;" onclick="stopAnimation()">Stop
                        Animation
                    </button>
                    <br />
                </div>
            </td>
            <td style="text-align: left; vertical-align: top;">
                <table>
                    <tr>
                        <td style="vertical-align: top">
                            <p class="title" style="margin: 5px auto 5px auto">Source</p>
                            <div id="cy"></div>
                            <div style="width: 500px; margin: auto auto; text-align: center">
                                <span style="font-weight: bold">Total Weight:&nbsp;</span>
                                <span id="cy_weight">0</span><br />
                                <div id="process" style="width: 500px; font-size: 16px; font-weight: bold;"></div>
                                <button class="btn btn-small" onclick="getGraphML(cy)">Export to GraphML</button>
                                <button class="btn btn-small" onclick="getAM(cy, true, true)">Get AM</button>
                                <button class="btn btn-small" onclick="getWM(cy, true, true)">Get WM</button>
                                <button class="btn btn-small" onclick="clearCyStyle()">Clear Color</button>
                                <button class="btn btn-small btn-danger" onclick="clearSource()">Clear Elements</button>
                            </div>
                        </td>
                        <td id="ca_tab" style="vertical-align: top;">
                            <p class="title" style="margin: 5px auto 5px auto">Result</p>
                            <div id="ca"></div>
                            <div style="width: 500px; margin: auto auto; text-align: center">
                                <span style="font-weight: bold">Total Weight:&nbsp;</span>
                                <span id="ca_weight">0</span><br />
                                <div id="path" style="width: 500px;"></div>
                                <button class="btn btn-small" onclick="getGraphML(ca)">Export to GraphML</button>
                                <button class="btn btn-small" onclick="getAM(ca, true, true)">Get AM</button>
                                <button class="btn btn-small" onclick="getWM(ca, true, true)">Get WM</button>
                                <button class="btn btn-small" onclick="clearCaStyle()">Clear Color</button>
                                <button class="btn btn-small btn-danger" onclick="clearResult()">Clear Elements</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="text-align: center">
                            <p style="margin-top: 5px; margin-bottom: 5px;">
                                Click <a href="directed-graph-help.html" target="_blank">here</a> to see instructions.
                                Developed and maintained by Hanzhi Zhou, based on
                                <a href="http://js.cytoscape.org/" target="_blank">Cytoscape.js</a><br />
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <script src="js/style-directed.js?ver=2"></script>
    <script src="js/main-common.js?ver=2"></script>
    <script src="js/main-directed.js?ver=2"></script>
    <script src="js/held-karp.js?ver=2"></script>
</body>

</html>